<template name="BmiHeightChart">
	<view <view style="display: flex;justify-content: center;align-items: center;">
		<canvas canvas-id="heightCanvas" id="heightCanvas" class="charts" disable-scroll=true @touchstart="touchLineA"
		 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
	</view>
</template>

<script>
	import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js'
	var _self;
	var heightCanvas = null;

	export default {
		name: "BmiHeightChart",

		props: {
			monthBaseValues: {
				type: Array,
				default () {
					return []
				}
			},

			beginIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			
			endIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			
			actualMonth: {
				type: Number,
				default () {
					return 0
				}
			},

			lineValues: {
				type: Array,
				default () {
					return []
				}
			},

			lineNames: {
				type: Array,
				default () {
					return []
				}
			}
		},

		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			};
		},

		created() {
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(500);
			this.initData();
		},

		methods: {
			initData() {
				let LineA = {
					categories: [],
					series: []
				};
				
				LineA.categories = this.$props.monthBaseValues.slice(this.$props.beginIndex, this.$props.endIndex);
				for (var index in this.$props.lineNames) {
					var series = {
						name: '',
						data: [],
					}
					series.name = this.$props.lineNames[index];
					series.data = this.$props.lineValues[index].slice(this.$props.beginIndex,this.$props.endIndex);
					LineA.series[index] = series;
				}
				_self.showLineA("heightCanvas", LineA);
			},

			showLineA(canvasId, chartData) {
				heightCanvas = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 2,
					},
					dataLabel: false,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: false, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						// type: 'grid',
						gridType: 'dash',
						itemCount: 10,
						scrollShow: true,
						scrollAlign: 'left'
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						format: (val) => {
							return val.toFixed(0) + 'cm'
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					},
				});
			},

			touchLineA(e) {
				heightCanvas.scrollStart(e);
			},
			moveLineA(e) {
				heightCanvas.scroll(e);
			},
			touchEndLineA(e) {
				heightCanvas.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				heightCanvas.touchLegend(e);
				heightCanvas.showToolTip(e, {
					format: function(item, category) {
						return item.name + ':' + item.data + 'cm'
					}
				});
			},
		}
	}
</script>

<style>
	.charts {
		width: 95%;
		height: 500upx;
		/* background-color: #007AFF; */
	}
</style>
